<template>
  <g class="brick-text" :transform="props.transform">
    <defs>
      <pattern
        id="brickwall"
        width="2"
        height="2"
        patternUnits="userSpaceOnUse"
      >
        <Brick transform="scale(0.25)" />
      </pattern>
    </defs>
    <Text
      :content="props.content"
      fill="url(#brickwall)"
      transform="scale(4)"
    />
  </g>
</template>

<script setup>
  import Text from './Text.vue'
  import Brick from './Brick.vue'

  const props = defineProps(['content', 'transform'])
</script>

<style lang="scss" scoped>

</style>